<template>


	<view class="scroll-goods">
		<view class="title" v-if="title">
			{{title}}
		</view>

		<view class="goods">
			<scroll-view class="scroll-coupon" scroll-x="true" @scroll="scroll">
				<view class="item" @tap="toDetail(goods)" v-for="(goods,index) in goodsList" :key="index">
					<view class="goods-img">
						<image lazy-load="true" :src="goods.original_image" mode=""></image>
						
					</view>
					<view class="goods-name uni-ellipsis">{{goods.goods_name}}</view>
					<view class="goods-amount">￥{{goods.shop_price}}</view>

				</view>

			</scroll-view>

		</view>
	</view>


</template>

<script>
	export default {
		props:['goodsList', 'title'],
		data() {
			return {

			};
		},
		methods: {
			//去商品详情
			toDetail: function(item) {
				uni.navigateTo({
					url: '/pages/goods/detail?id='+item.id
				})
			}
		}
	}
</script>

<style>
	
	.scroll-goods {
		flex-direction: column;
	}

	.scroll-goods .title {
		line-height: 80upx;
		padding: 0 20upx;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		color: #e60012;
		font-size: 32upx;
		font-weight: 600;
		letter-spacing: 6upx;
		border-bottom: 1upx solid #eee;
	}

	
	.scroll-goods .coupon-goods {
		width: 100%;
		overflow: hidden;
		padding: 10upx;
		box-sizing: border-box;
		
	}

	.scroll-goods .scroll-coupon {
		white-space: nowrap;
		background: #F5F5F5;
		font-size: 24upx;
	}


	.scroll-goods .item {
		display: inline-flex;
		text-align: center;
		flex-direction: column;
		width: 220upx;
		margin-right: 10upx;
		padding: 10upx;
		box-sizing: border-box;
		background: #fff;
	}

	.scroll-goods .goods-img {
		position: relative;
	}

	.scroll-goods .item image {
		width: 200upx;
		height: 200upx;
		/* border-radius: 10upx; */
	}


	.scroll-goods .goods-name {
		padding: 10upx 0;
		color: #333;
		
	}

	.scroll-goods .goods-amount {
		color: #FC4D52;
		font-size: 20upx;
		text-align: left;
	}

	.scroll-goods .goods-amount .del-amount {
		color: #ccc;
		padding-left: 10upx;
	}

	/* 大家都在领结束 */
</style>
